<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <link rel="stylesheet" href="css/Animate.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bgc{
            width: 300px;
            height: 300px;
            position: relative;
            margin: 150px auto;
        }
        .d1{
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: olivedrab;
            border-radius: 50%;
        }
        .d2{
            position: absolute;
            width: 260px;
            height: 260px;
            margin:20px 20px ;
            border-radius: 50%;
            background-color: white;
        }


        .d3{
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: olivedrab;
            margin: 135px 135px;
        }
        .d4{
            position: absolute;
            width: 220px;
            height: 220px;
            background-color: white;
            border-radius: 50%;
            margin: 40px 40px;
        }


       .dd1{
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px) rotate(30deg);
        }
        .dd2{
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px) rotate(60deg);
        }
        .dd3{
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px) rotate(90deg);
        }
        .dd4{
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px) rotate(120deg);
        }
        .dd5{
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px) rotate(150deg);
        }
        .dd6{
            position: absolute;
            width: 10px;
            height: 300px;
            background-color: olivedrab;
            transform: translateX(145px);
        }
        .second{
            position: absolute;
            width: 4px;
            height: 100px;
            background-color: blue;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            transform-origin: center bottom;
            animation: clockAnimation 60s infinite steps(60);

        }
        .minute{
            position: absolute;
            width: 6px;
            height: 80px;
            background-color: blueviolet;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            transform-origin: center bottom;
            animation: clockAnimation 3600s linear infinite;



        }
        .hour{
            position: absolute;
            width: 8px;
            height: 60px;
            background-color: red;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            transform-origin: center bottom;
            animation: clockAnimation 43200s linear infinite;
        }
        @keyframes clockAnimation {
            from{
                transform:translate(-50%,-100%) rotate(0deg);
            }
            to{
                transform:translate(-50%,-100%) rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="bgc">
    <div class="d1"></div>
    <div class="d2"></div>


    <div class="dd dd1"></div>
    <div class="dd dd2"></div>
    <div class="dd dd3"></div>
    <div class="dd dd4"></div>
    <div class="dd dd5"></div>
    <div class="dd dd6"></div>
    <div class="d4"></div>

    <div class="second"></div>
    <div class="minute"></div>
    <div class="hour"></div>
    <div class="d3"></div>
</div>
</body>
</html>